<!--  -->
<template>
<div>
    <mt-header title="我的">
  <router-link  to  slot="left">
    <mt-button icon="back" @click="$router.back(-1)"></mt-button>
  </router-link>
  <mt-button icon="more" slot="right"></mt-button>
    </mt-header>
<div class="border">
    <div class="card">
        <div class="img" v-if="userInfo.UserSex==0">
            <img src="../assets/img/头像 商务男人.png" alt="">
        </div>
        <div class="img" v-if="userInfo.UserSex==1">
            <img src="../assets/img/头像 中长发女孩.png" alt="">
            </div>
        <div class="img" v-if="userInfo.UserSex==2">
            <img src="../assets/img/moren.png" alt="">
        </div>
        <div class="text">
            <p>昵称: {{ userInfo.UserNickName }}</p>
            <p>用户名: {{ userInfo.UserName }}</p>
            <p>个性签名: {{ userInfo.UserSignature }}</p>
        </div>
    </div>
    <div class="yemian">
        <mt-cell
        title="我的订单"
        to="/MyOrder"
        is-link>
        </mt-cell>
        <mt-cell
        title="账号管理"
        to=/UserManagement
        is-link>
        </mt-cell>
        <mt-cell
        title="地址管理"
        to="/AdressSet"
        is-link>
        </mt-cell>
        <mt-cell
        title="关于我们"
        to="/About"
        is-link>
        </mt-cell>
    </div>
        <mt-popup
            v-model="popupVisible"
            modal="false"
            closeOnClickModal="false">
            <div class="content">
                <div class="title">请选择你的性别</div>
                <div class="sex">              
                    <div class="boy" @click="sex=0">
                        <img src="../assets/img/头像 商务男人.png" alt="">
                        <p>男</p>
                    </div>
                    <div class="girl" @click="sex=1">
                        <img src="../assets/img//头像 中长发女孩.png" alt="">
                        <p>女</p>
                    </div>
                </div>
            </div>
        </mt-popup>
    <Tabbar :selected="selected"></Tabbar>
</div>
</div>
</template>

<script>
import Tabbar from "../components/TabbarName.vue";
import { Toast } from 'mint-ui';
export default {
data() {
return {
  userInfo:{},
  popupVisible: false,
  sex:'',
  selected:"MyHome",
}
},
//生命周期 - 创建完成（访问当前this实例）
created() {

},
//生命周期 - 挂载完成（访问DOM元素）
mounted() {
// 判断登录状态
let userInfo=JSON.parse(localStorage.getItem("userInfo")); //去除localStoreage中的登录状态
console.log(userInfo)
  // 如果登录状态为空则跳转到首页
  if(userInfo==null){
    // 路由跳转到首页
    this.timerGO()
  }else{
      if(userInfo.isLogin){
        this.userInfo=userInfo
        this.getUser()
      }
  }
},
methods:{
    timerGO(){
        this.$router.push({
          path:"/UserLogin"
        })
        this.err("未登录")
    },
    err(a){
          this.toastInstanse=Toast(a);
      },
    getUser(){
        var url=`/GetUser?UserName=${this.userInfo.uname}`
        this.axios.get(url).then(res=>{
            console.log(res)
            this.userInfo=res.data.result
            console.log(this.userInfo)
            //   判断性别是否选择
            if(this.userInfo.UserSex==2){
                console.log("读取性别没选择")
                this.popupVisible=true
            }
        })      
        },
    SetSex(){
        var url=`/SetSex?UserName=${this.userInfo.UserName}&UserSex=${this.sex}`
        console.log(this.userInfo.UserName)
        this.axios.get(url).then(res=>{
                console.log(res)
                this.popupVisible=false
                this.$router.go(0)
        })
    }
},
watch: {  
      sex(a,b) {
        console.log("新值",a)
        console.log("旧值",b)
        this.SetSex()
       },
   deep: true
  
 },
 components: {
    Tabbar
  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */
.mint-header{
    color: black;
    background-color: white;
    font-size: 10px;
}
.mint-cell{
    font-size: 10px !important;
    
}
.mint-cell .mint-cell-wrapper{
    font-size: 10px !important;
}
.border{
    margin:10px;
    /* padding: 10px; */
    font-size: 10px;

}
.card{
    background-color:rgb(70, 185, 185);
    color: white;
    display: flex;
    border-radius: 8px;
    padding: 20px;
    border: 1px solid rgb(176, 170, 170);
}
.img{
    width: 20%;
    /* background-color: blue; */
    border-radius:50%;
    width: 60px;
    height: 60px;
}
.img img{
    width: 60px;
    height: 60px;
    border-radius:50%;

}
.text{
    width: 80%;
    margin-left: 10px;
}
.text p{
    padding: 2px 0;
}



.content{
        max-width:100%;
        height: 100%;
        background-color: rgb(128,128,128);
        color: white;
    }
    .content .title{
        font-size: 18px;
        text-align: center;
    }
    .content .sex{
        width: 100%;
        height: 100%;
        display: flex;
    }
    
    .content .boy{
        /* background-color: aqua; */
        height: 100;
        text-align: center;
        font-size: 15px;
        margin:20px;
    }
    .content .boy img{
        width: 100px;
    }
    .content .girl{
        /* background-color: aqua; */
        height: 100;
        text-align: center;
        margin:20px;
        font-size: 15px;

        
    }
    .content .girl img{
        width: 100px;
    }
</style>